<template>
    <div class="case">
      <div class="case-main">
        <div class="case-content" v-for="(item,index) in types" :key="index">
          <div class="title">
            <span>{{ item.name }}</span>
          </div>
          <el-row class="items">
            <el-col class="item" v-show="child.state==1" v-for="(child,key) in item.data" :key="key" :xs="12" :sm="6">
              <div class="item-content">
                <img :src="child.cover" @click="jump(child)" onerror="this.src='/imgs/noimg.jpg';this.onerror=null" alt="">
                <div class="name">{{ child.title }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    components: {
    },
    data(){
      return{
        types:[],
      }
    },
    methods:{
      //跳转页面
      jump(child){
        this.$router.push({ name: 'caseDetails', query: { id:child.id }});
      },
      //获取案例分类
      getTypes(){
        this.$apis.baseData.getClazz({pcode:'AL'}).then(res=>{
          this.types=res.data.list||[]
          if(this.types.length){
            for(let item of this.types){
              this.$set(item,'data',[])
              this.getTypesNext(item)
            }
          }
        })
      },
      //获取案例分类下的数据
      getTypesNext(item){
        this.$apis.baseData.getPage({clazzCode:item.code,"pageNum": "1", "pageSize": "1000"}).then(res=>{
          item.data=res.data.list||[]
        })
      },
    },
    mounted(){
      this.getTypes()
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .case{
    display: flex;
    flex-direction: column;
    background: #fff;
  }
  .case-main{
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    padding-bottom: 30px;
  }
  .case-content{
    margin-top: 10px;
    width: $public-width;
    max-width: 100%;
    .title{
      margin: 10px;
      font-size: 18px;
      font-weight: bold;
    }
    .back{
      cursor: pointer;
    }
    .type{
      color: $color-main-primary;
    }
    .items{
      width: 100%;
      .el-col{
        padding: 10px;
        max-height: 200px;
      }
      img{
        display: inline-block;
        width: 100%;
        height: auto;
        cursor: pointer;
      }
      img:hover{
        border: 2px solid $color-main-primary;
      }
      .item-content{
        //display: inline-block;
        position: relative;
      }
      .name{
        position: absolute;
        padding: 10px 6px;
        background: rgba($color: #000000, $alpha: 0.6);
        color: #fff;
        text-align: center;
        top: 0;
        box-sizing: border-box;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  </style>
  